<template>
    <div>
<h2>添加</h2>
<table class="table">
    <tbody>
        <tr>
            <td>菜谱标题</td>
            <td>
                <input type="text" v-model="data.name">
            </td>
        </tr>
        <tr>
            <td>分类</td>
            <td>
                <select v-model="data.type">
                    <option value="请选择">请选择</option>
                    <option value="早餐">早餐</option>
                    <option value="午餐">午餐</option>
                    <option value="晚餐">晚餐</option>
                </select>
            </td>
        </tr>
        <tr>
            <td>分享</td>
            <td>
                <input type="text" v-model="data.num">
            </td>
        </tr>
        <tr>
            <td>收藏</td>
            <td>
                <input type="text" v-model="data.likeNum">
            </td>
        </tr>
        <tr>
            <td>时间</td>
            <td>
                <input type="date" v-model="data.createTime">
            </td>
        </tr>
        <tr>
            <td>状态</td>
            <td>
                <input type="radio" v-model="data.zhuangTai" name="zhuangTai" value="1" checked>正常
                <input type="radio" v-model="data.zhuangTai" name="zhuangTai" value="2">异常
            </td>
        </tr>
        <tr>
            <td>
                <input type="button" value="添加" @click="Add">
            </td>
        </tr>
    </tbody>
</table>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
import axios from 'axios';

const data=ref({
  "id": 0,
  "name": "",
  "type": "请选择",
  "num": 0,
  "likeNum": 0,
  "createTime": "",
  "zhuangTai": 0,
  "img": ""
})

const Add=()=>{
    if(data.value.name==""){
        alert("标题不能为空");
        return;
    }
    if(data.value.type==""){
        alert("分类不能为空");
        return;
    }
    if(data.value.createTime==""){
        alert("时间不能为空");
        return;
    }
    axios.post("https://localhost:7182/api/Food/AddFood",data.value).then(res=>{
        if(res.data>0){
            alert("添加成功");
            location.href="/"
        }
        else{
            alert("添加失败");
        }
    })
}
</script>

<style scoped>

</style>